  {
      /* console.log('开始canvas绘制之旅'); */
  }
  const canvas = document.getElementById('canvas')
  // 这个设置的是元素的大小
  canvas.style.width = '400px';
  canvas.style.height = '200px';

  // 直接设置属性，不用加单位，这个是绘制区域的宽高
  canvas.width = 400
  canvas.height = 200

  // 绘制上下文
  const context = canvas.getContext('2d');


  context.fillStyle = 'red'
  context.fillRect(0, 0, 50, 50)

  context.fillStyle = 'red'
  context.fillRect(0, 0, 50, 50)

  context.fillStyle = 'blue'
  //   canvas 的默认绘制起点是左上角
  //   基于中心 其他角落的时候
  
  context.translate(50, 50)
  context.rotate(-Math.PI / 6)
  context.scale(2, 3)
  context.fillRect(0, 0, 50, 50)